<template>
  <div id="mybalance">
    <div class="topbox">
      <div class="top-left">
        <p v-show="lang == 'zh'" class="top-txt">余额（元）</p>
        <p v-show="lang == 'en'" class="top-txt">Balance (RMB)</p>
        <p class="top-num">{{ balance }}</p>
      </div>
      <div class="top-right" @click="gotoCard">
        <p v-show="lang == 'zh'" class="top-txt">银行卡（张）</p>
        <p v-show="lang == 'en'" class="top-txt">Bank card (pieces)</p>
        <p class="top-num">{{ bankcard }}</p>
      </div>
    </div>
    <div v-show="lang == 'zh'" class="list-title">余额收支记录（元）</div>
    <div v-show="lang == 'en'" class="list-title">
      Balance of income and expenditure records (yuan)
    </div>
    <!-- 使用van-list -->
    <div class="scrowbox">
      <van-list
        v-model="loading"
        :finished="finished"
        @load="listRoll"
        :offset="offset"
        :immediate-check="isCheck"
      >
        <div v-for="(item, index) in listdata" :key="index">
          <div class="list-box">
            <p v-show="lang == 'zh'" class="list-type">
              {{ type[item.trade_type - 1] }}
            </p>
            <p v-show="lang == 'en'" class="list-type">
              {{ type_en[item.trade_type - 1] }}
            </p>
            <p class="list-time">{{ item.trade_time }}</p>
            <div class="num plusnum" v-show="item.state == 1">
              +{{ item.trade_amount }}
            </div>
            <div class="num minusnum" v-show="item.state == 0">
              {{ item.trade_amount }}
            </div>
          </div>
        </div>
      </van-list>
      <div
        class="nolist"
        v-show="lang == 'zh'"
        v-if="finished && dataLength != 0"
      >
        没有更多数据
      </div>
      <div
        class="nolist"
        v-show="lang == 'en'"
        v-if="finished && dataLength != 0"
      >
        no more data
      </div>

      <div
        class="nolist"
        v-show="lang == 'zh'"
        v-if="finished && dataLength == 0"
      >
        无
      </div>
      <div
        class="nolist"
        v-show="lang == 'en'"
        v-if="finished && dataLength == 0"
      >
        none
      </div>
    </div>

    <div v-show="lang == 'zh'" class="get" @click="withdraw">提现</div>
    <div v-show="lang == 'en'" class="get" @click="withdraw">Withdraw</div>
  </div>
</template>
<script>
import { Toast, List } from "vant";
import { getAccountInfo, getTradeList } from "@/api/my/userInfo";
export default {
  name: "mybalance",
  //声明组件
  components: {
    [List.name]: List,
    [Toast.name]: Toast,
  },
  data() {
    return {
      lang: "zh", //语言环境
      pageIndex: 1, //分页页数
      pageSize: 10, //分页条数
      userId: 0, //用户ID
      offset: 50,
      loading: false, //是否正在加载
      finished: false, //是否加载完整
      isCheck: false, //是否一开始检查滚动
      dataLength: 0, //数据listData长度
      //trade_type：交易类型：1提现、2支付审核费用、3支付保证金、4支付藏品、5售出藏品、6退回保证金、7提现失败退回
      state: 1, //1进账   0出账
      type: [
        "提现",
        "支付审核费用",
        "支付保证金",
        "支付藏品金额",
        "售出藏品",
        "退回保证金",
        "提现失败退回",
      ],
      type_en: [
        "withdraw cash",
        "Payment audit fee",
        "Payment bond",
        "Payment of collection amount",
        "Sell out the collection",
        "Refund of margin",
        "Return of withdrawals failed",
      ],
      balance: 0, //余额
      bankcard: 0, //银行卡张数
      listdata: [], //交易列表
    };
  },
  //实例创建完成后被立即调用
  created() {
    //获取用户ID
    this.getUserId();
    //获取语言环境
    this.getLang();
    //获取个人账户信息
    this.getAccountInfo();
    //获取个人交易记录
    this.getTradelist();
  },
  //监听
  watch: {},
  //计算属性
  computed: {},
  //
  methods: {
    //获取用户ID
    getUserId() {
      if (this.$route.query.userId && this.$route.query.userId > 0) {
        this.userId = this.$route.query.userId;
      } else {
        //获取缓存内的用户ID
        this.userId = window.localStorage.getItem("userId");
      }
    },
    //获取语言环境
    getLang() {
      if (this.$route.query.lang) {
        this.lang = this.$route.query.lang;
      }
    },
    //滚动加载数据
    listRoll() {
      let _this = this;
      _this.pageIndex++;
      console.log("1");
      _this.getTradelist();
    },
    //获取个人账户信息
    getAccountInfo() {
      getAccountInfo(this.userId).then((res) => {
        if (res.code == 200) {
          //if(res.data.length > 0){
          var list = res.data;
          this.balance = list.balance;
          this.bankcard = list.bankcard_num;
          console.log(list);
          //}else{
          //获取个人信数据为空
          // Toast("获取个人信息失败，请稍后再试~");
          // }
          // this.loading = false;
          // this.finished = true;
        } else {
          Toast(res.msg);
        }
      });
    },
    //获取个人交易记录
    getTradelist() {
      getTradeList(this.userId, this.pageIndex, this.pageSize).then((res) => {
        if (res.code == 200) {
          if (res.data.total > 0) {
            var list = res.data.list;
            this.listdata = this.listdata.concat(list);
            for (let i = 0; i < this.listdata.length; i++) {
              if (this.listdata[i].trade_amount < 0) this.listdata[i].state = 0;
              else this.listdata[i].state = 1;
            }
            //this.loading = false;
          } else {
            this.finished = true;
            this.loading = false;
          }
          if (this.pageIndex == 1 && res.data.list.length < this.pageSize) {
            this.finished = true;
            this.loading = false;
          } else if (this.listdata.length == res.data.total) {
            this.finished = true;
            this.loading = false;
          } else {
            this.loading = false;
            this.finished = false;
          }
          this.dataLength = this.listdata.length;
        } else {
          Toast(res.msg);
        }
      });
    },

    gotoCard() {
      //跳转到我的银行卡
      let para = {};
      var title = "";
      if (this.lang == "zh") {
        title = "我的银行卡";
      } else {
        title = "My Card";
      }
      para.title = title;
      para.url = "/mycard?userId=" + this.userId + "&lang=" + this.lang;
      this.interaction.hLink(para);
    },
    //提现
    withdraw() {
      let para = {};
      var title = "";
      if (this.lang == "zh") {
        title = "提现";
      } else {
        title = "Withdraw";
      }
      para.title = title;
      para.url = "/getcash?userId=" + this.userId + "&lang=" + this.lang;
      para.backisRefresh = true;
      console.log(para);
      this.interaction.hLink(para);
    },
  },
};
</script>

<style lang="stylus" scoped>
*{
    box-sizing :border-box;
}
#mybalance{
    .nolist{
        width :100%;
        height :auto;
        padding: .266667rem ;
        text-align :center;
        font-family: PingFangSC-Regular;
        font-size: 0.373333rem;
        color: #a2a2a2;
        letter-spacing: 0.008rem;
    }
    .scrowbox{
        width :100%;
        height :10.853333rem;
        overflow :scroll;
        padding-bottom :1.2rem;
    }
    .topbox{
        width :100%;
        height :4.666667rem;
        background:url("http://img.zuimeng.net.cn/my/beijing_wodeyue@2x.png") no-repeat;
        background-size :100% 100%;
        padding-bottom :.533333rem;
        padding-top :2.373333rem;
        .top-left{
            float :left;
            width :60%;
            height :1.76rem;
        }
        .top-right{
            float :left;
            width :40%;
            height :1.76rem;
        }
        .top-txt{
            font-family:PingFangSC-Regular;
            font-size:.32rem;
            color:#737373;
            letter-spacing:.004533rem;
            text-align:center;
            margin-bottom :.186667rem;

        }
        .top-num{
            ont-family:PingFangSC-Medium;
            font-size:.8rem;
            color:#cb9c57;
            letter-spacing:.0112rem;
            text-align:center;
        }
    }
    .list-title{
        width :100%;
        height :.986667rem;
        line-height :.986667rem;
        background-color :#ffffff;
        padding :0 .266667rem;
        font-family:PingFangSC-Regular;
        font-size:.32rem;
        color:#a2a2a2;
        letter-spacing:0;
        text-align:left;
        border-bottom :.026667rem solid #f1f1f1;
    }
    .list-box{
        position :relative;
        clear :both;
        width :100%;
        height :1.626667rem;
        padding :.213333rem .266667rem;
        background-color :#fff;
        border-bottom:.026667rem solid #f1f1f1;
        font-family:PingFangSC-Regular;
        .list-type{
            clear :both;
            text-align :left;
            height :.56rem;
            line-height :.56rem;
            font-size:.4rem;
            color:#494949;
            letter-spacing:.0056rem;
        }
        .list-time{
            clear :both;
            text-align :left;
            height :.533333rem;
            line-height :.533333rem;
            font-size:.32rem;
            color:#a2a2a2;
            letter-spacing:.004533rem;
        }
        .num{
            position :absolute;
            top:50%;
            right :.266667rem;
            margin-top :-0.293333rem;
            height :.586667rem;
            font-family:Helvetica;
            font-size:.48rem;
            letter-spacing:0;
            text-align:right;
        }
        .plusnum{
            color:#cb9c57;
        }
        .minusnum{
            color:#494949;
        }
    }
    .get{
        width :100%;
        height :1.2rem;
        line-height :1.2rem;
        background-color #fff;
        text-align :center;
        position :fixed;
        bottom :0;
        font-family:PingFangSC-Medium;
        font-size:.4rem;
        color:#cb9c57;
        letter-spacing:.0056rem;
        text-align:center;
    }
}
</style>
<style>
#mybalance .van-list {
}
</style>
